<template>
    <div class="main main_bg" :style="$store.state.isApp?'paddingTop:.2rem':'paddingTop:1.1rem'">
      <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp" ></gltitle>
      <div class="container">
        <div class="select wrap bet">
          <div class="time db" @click="time_show = true">
            <div class="flex">{{date == '' ? $t('staff.doc35') : date}}</div><van-icon name="arrow-down" />
          </div>
          <div class="val db" @click="type_show = true">
            <div class="flex"><input type="text" :placeholder="$tc('staff.doc47',1)" v-model="type_name" readonly></div><van-icon name="arrow-down" />
          </div>
        </div>

        <div class="list">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="$t('load.no_more')"
            :loading-text="$t('load.loading')"
            @load="onLoad"
            v-show="!emptyShow"
            @change="handleChangeSelect"
            :offset="5"
            class="listContent"
          >
          <div class="boxshadow" v-for="(item,k) in dataList" :key="k">
            <div class="top db">
              <div class="photo">
                <img :src="item.avatar" alt="">
              </div>
              <div class="flex">
                <div class="cid">ID:{{item.userId}}</div>
                <p class="c-999">{{item.createTime}}</p>
              </div>
              <div class="str">
                <span class="s0" v-if="item.staffPositionId == 1">{{item.staffName}}</span>
                <span class="s1" v-else-if="item.staffPositionId == 2">{{item.staffName}}</span>
                <span class="s2" v-else-if="item.staffPositionId == 3">{{item.staffName}}</span>
                <span class="s3" v-else-if="item.staffPositionId == 4">{{item.staffName}}</span>
                <span class="s4" v-else>{{item.staffName}}</span>
              </div>
            </div>
            <ul class="line">
              <li class="db"><div class="name c-999">{{$t('staff.doc43')}}:</div><div class="flex">{{item.rechargeAmount}} USDT</div></li>
              <li class="db"><div class="name c-999">{{$t('staff.doc44')}}:</div><div class="flex">{{item.withdrawAmount}} USDT</div></li>
              <li class="db"><div class="name c-999">{{$t('staff.doc45')}}:</div><div class="flex">{{item.selftAchievementAmount}} USDT</div></li>
              <li class="db"><div class="name c-999">{{$t('staff.doc46')}}:</div><div class="flex">{{item.totalPerformanceAmount}} USDT</div></li>
            </ul>
          </div>

          </van-list>
        </div>



        <div class="rel" v-if="is_len">
          <div class="empty">
            <img src="../../assets/images/none2.png" alt="">
            <span class="c-999">{{$t('toast.no_data')}}</span>
          </div>
        </div>


      </div>





      <van-popup v-model="time_show" position="bottom">

        <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          title=""
          :max-date="maxDate"
          item-height=".8rem"
          :columns-order="['year', 'month', 'day']"
          :formatter="formatter"
          @confirm="timeConf"
          :cancel-button-text="$t('word.cancle')"
          :confirm-button-text="$t('word.ok')"
        />
      </van-popup>

      <van-popup v-model="type_show" position="bottom">

      <van-picker
        title=""
        show-toolbar
        :cancel-button-text="$t('word.cancle')"
        :confirm-button-text="$t('word.ok')"
        item-height=".8rem"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
      </van-popup>


    </div>
</template>
<script>


  export default {
  data(){
    return {
      it:0,
      if_check:false,
      titleSize:this.$t('staff.doc3'),
      is_mt:true,
      // titleRight: "<img src=" + require("../../public/images/ico_10_10.png") + ">"
      date:'',
      time_show:false,
      currentDate: new Date(),
      maxDate: new Date(),
      dataList:[],
      pageSize: 10,
      loading: false,
      finished: false,
      refreshing: false,
      emptyShow:false,
      lastId:'',
      columns: [this.$tc('staff.doc47',1),this.$tc('staff.doc47',2), this.$tc('staff.doc48',0), this.$tc('staff.doc48',1), this.$tc('staff.doc48',2)],
      type_show:false,
      type_name:'',
      type_id:'',
      is_len:false

    }
  },
    watch: {
      dataList(newValue, oldValue) {
        if (newValue.length == 0) {
          this.isHasList = false;
          this.emptyShow = true
          this.is_len = true

        }else{
          this.isHasList = true;
          this.emptyShow = false;
          this.is_len = false
        }
      },
    },
    created() {

    },
    mounted() {


    },
    methods: {
      onConfirm(value, index) {
        this.type_show = false
        this.type_name = value
        this.type_id = index
        console.log(value,index)
        this.onRefresh()
      },
      onChange(picker, value, index) {

      },
      onCancel() {
        this.type_show = false
      },
      timeConf(value) {
        this.time_show = false;
        this.date = this.$moment(value).format("YYYY-MM");
        this.onRefresh()
      },
      formatter(type, val) {
        if (type === 'year') {
          return `${val}` + this.$t('model.year');
        } else if (type === 'month') {
          return `${val}` + this.$t('model.month');
        } else if (type === 'day') {
          return `${val}` + this.$t('model.day');
        }
        return val;
      },
      onRefresh() {
        this.finished = false
        this.loading = true
        this.dataList = []
        this.lastId = ''

        this.onLoad();
      },
      onLoad() {
        this.datalists();
      },
      handleChangeSelect() {
        this.lastId = ''
        this.dataList = [];
        this.datalists();
      },

      datalists(){
        let data = {
          date:this.date,
          staffPositionId:this.type_id,
          pageSize:this.pageSize,
          lastId: this.lastId,
        };

        this.$post(this.URL.staff.team, {
          ...data,

        }).then((res) => {
          if (res.code == 0) {

            this.loading = false;

            if (0 != res.code) {
              this.finished = true;
              this.lastId = 0;
              return;
            }
            if(null == res.data){
              this.finished = true;
              return;
            }
            if(null == res.data.list){
              this.finished = true;
              return;
            }


            let initData = res.data.list;

            // 最后一条数据的id，用于下一次请求，服务器给的新分页请求方法
            let endItem = initData[initData.length -1];

            if(endItem != undefined){
              this.lastId = endItem.id;
            }


            if (this.isEmptyList) {
              this.dataList = [];
            }

            this.dataList.push(...initData);
            this.isEmptyList = false;




            console.log(this.dataList.length,'sssss')
            if (res.data.list.length < this.pageSize) {
              this.finished = true;
              return;
            }
          } else {
            this.$toast(res.message);
          }
        });
      },


    },


}

</script>


<style lang="less" scoped>
  #app {
    .container {
      padding: 0 .2rem;
      .boxshadow {
        overflow: hidden;
      }


      .select {
        padding: .1rem .16rem .3rem .16rem;
        .db {
          height: .68rem;
          background: #ffffff;
          border: .02rem solid #cccccc;
          border-radius: .1rem;
          padding: 0 .18rem;
          font-size: .26rem;
          i {
            font-size: .26rem;
            color: #999;
          }
        }
        .time {
          width: 2.76rem;
        }
        .val {
          width: 3.8rem;
          input {
            border:0;
            width: 100%;
          }
          input::placeholder {
            color: rgba(206, 206, 206, 1) !important;
          }
        }
      }
      .list {
        .boxshadow {
          padding: 0 .3rem;
        }
        .top {
          height: 1rem;border-bottom: .01rem solid #eee;
          .photo {
            width: .63rem;border-radius: 50%;
            overflow: hidden;
            height: .63rem;
            background: url(../../assets/images/ico_photo.png) no-repeat;background-size: 100% 100%;
            img {
              height: .63rem;
            }
          }
          .flex {
            padding: 0 .2rem;
            line-height: .36rem;
            .name {
              font-size: .28rem;
              font-weight: 500;
              color: #333333;
            }
            p {
              font-size: .24rem;
            }
          }
          .str {
            margin-right: -.3rem;
            span {
              width: 1.13rem;
              height: .6rem;
              display: block;
              background: linear-gradient(-90deg,#e50021 0%, #f49033 100%);
              border-radius: .3rem 0 0 .3rem;
              font-size: .26rem;
              color: #fff;
              text-align: center;
              line-height: .6rem;
            }
            .s0 {
              background: linear-gradient(-90deg,#712e75 0%, #f05f88 100%);
            }
            .s2 {
              background: linear-gradient(-90deg,#063dc3 0%, #2294ed 100%);
            }
            .s3 {
              background: linear-gradient(-90deg,#0fa3d4 0%, #65ba60 100%);
            }
            .s4 {
              background: linear-gradient(-90deg,#3f5874 0%, #919fac 100%);

            }
          }
        }
        ul {
          padding: .2rem 0;
          li {
            padding: .08rem 0;
            .name {
              width: 1.8rem;
              line-height: .3rem;
              margin-right: .1rem;
            }
          }
        }
      }
    }
  }
</style>
